<script setup lang="ts">
import { ref, defineEmits, getCurrentInstance,onUnmounted } from "vue"
import { useRouter } from 'vue-router'
const router = useRouter();
const { proxy } = getCurrentInstance();
const emit = defineEmits(['changeHeaderCSS']);
const changeHeaderCSS = (flag: boolean) => {
  emit('changeHeaderCSS', flag);
}
const underHeader = ref();
// 监听元素是否在可视区域内组件
import { useIntersectionObserver } from '@vueuse/core'
//调用这个函数useIntersectionObserver，里面传三个参数
// 1. stop 是一个函数。如果调用它，就会停止观察（是否进入或移出可视区域的行为）
// 2. target 是观察的目标容器 dom对象 | 组件对象
// 3. isIntersecting 是一个bool值，表示是否进入可视区域。 true表示 进入 false表示 移出\
const { } = useIntersectionObserver(
  underHeader,// target 是vue的对象引用。是观察的目标
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }]: any) => {
    if (isIntersecting) {
      // 子组件监听进入可视区域调用父组件方法
      //进入可视区域
      changeHeaderCSS(false)
      if (browerWidth < 1200) {
        changeHeaderCSS(true)
      }
    } else {
      changeHeaderCSS(true);
    }
  },
  // threshold 表示观察的目标进入视口的比例，取值范围是从 0 到 1
  // 默认是0.1。 值越大表示观察越不灵敏
  { threshold: 0.1 }
)
// 等比缩放
//获取整个界面的宽
let browerWidth = window.innerWidth;
//整个界面的宽*0.36 = 高

let bannerHeight = ref(browerWidth < 1200 ? browerWidth * 0.05 : 40)
// 浏览器加载时，判断宽度是否大于1200,从而判断头部右侧显示菜单还是图标
let nav = ref(browerWidth < 1200);
const listenerReSize = ()=>{
  browerWidth = window.innerWidth;
  // 如果宽度小于1200,头部菜单变为图标
  if (browerWidth < 1200) {
    //头部菜单变为图标
    changeHeaderCSS(true)
    nav.value = true
    bannerHeight.value = browerWidth * 0.05;
  } else {
    // 头部图标变为菜单
    changeHeaderCSS(false)
    nav.value = false
    bannerHeight.value = 40;
  }
}
window.addEventListener('resize',listenerReSize);
const ideaList = ref();
//调用后台接口得到idea数据
const getIdeaList = async () => {
  let result = await proxy.Request({
    url: "/idea/loadDataList",
    params: {
      pageNo: 1,
      pageSize: 1000
    }
  })
  if (!result) {
    return;
  }
  ideaList.value = result.data.list;
}
onUnmounted(()=>{
  window.removeEventListener('resize',listenerReSize);
})
getIdeaList();
// 路径跳转
const jumpIdeaDetail = (id) => {
  router.push("/ideaDetail/" + id);
}
</script>

<template>
  <div class="service">
    <div ref="underHeader"></div>
    <div class="box">
      <!-- 新闻布局容器 -->
      <el-row justify="center">
        <el-col>
          <!-- 导航 -->
          <el-row align="middle">
            <el-col :span="4"  :xs="24" :sm="24" :md="4" style="margin-top: 20px;" >
              <!-- 导航标题 -->
              <span class="n-title">NEWS</span>
            </el-col>
            <el-col :span="16" :xs="24" :sm="24" :md="16" style="margin-top: 20px;">
              <!-- 分类 -->
              <!-- todo  -->
              <!-- 分类循环，到时候从后台拿 -->
              <div >
                <a href="#" class="nav">品牌策划观点</a>|
                <a href="#" class="nav">品牌设计动态</a>|
                <a href="#" class="nav">包装设计分享</a>
              </div>
            </el-col>
          </el-row>
          <div v-for="idea in ideaList">
            <el-row class="news-row" >
              <el-col :span="12" :lg="12" :xs="24">
                <!-- img -->
                <div class="bg-img tt click">
                  <div :style="{ backgroundImage: 'url(' + idea.cover + ')' }" @click="jumpIdeaDetail(idea.id)"
                    class="tt click shou ">
                  </div>
                </div>
              </el-col>
              <el-col :lg="12" :span="12" :xs="24">
                <!-- 文字 -->
                <div class="text">
                  <!-- 日期 -->
                  <p class="black myp" :style="{ marginBottom: bannerHeight + 'px' }" @click="jumpIdeaDetail(idea.id)">
                    {{ idea.createDate }}</p>
                  <!-- 标题 -->
                  <p class="news-title myp black click" :style="{ marginBottom: bannerHeight + 'px' }"
                    @click="jumpIdeaDetail(idea.id)">{{ idea.title }}</p>
                  <!-- 省略文字 -->
                  <p class="click myp" :style="{ marginBottom: bannerHeight + 'px' }"
                    @click="jumpIdeaDetail(idea.id)">
                    <el-text line-clamp="2" v-html="idea.content" class="lin">
                    </el-text>
                  </p>
                  <!-- read the article -->
                  <p class="underline myp black click" :style="{ marginBottom: bannerHeight + 'px' }"
                    @click="jumpIdeaDetail(idea.id)">Read the article</p>
                </div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>

.box {
  padding: 80px 5% 100px;
  max-width: 1300px;
  margin: 0 auto;
  .text{
    padding: 0;
  }
  .news-row {
    margin: 50px 0;
  }

  .myp {
    margin: 25px 0 ;
  }

  .news-title {
    font-size: 24px;
  }
}

.click {
  cursor: pointer;
}

.underline {
  text-decoration: underline;
}

.black {
  color: black;
}

.n-title {
  font-family: Microsoft Yahei;
  font-size: 28px;
  font-weight: 100;
}

.nav {
  display: inline-block;
  padding: 0 18px;
  font-size: 16px;
  color: #585656;

  &:hover {
    color: black
  }
}

.bg-img {
  width: 80%;
  overflow: hidden;

  .tt {
    width: 100%;
    height: 0;
    padding-bottom: 80%;
  }

  .shou {
  overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.3s ease;

    &:hover {
      transform: scale(1.2);
    }
  }
}

.ml10 {
  margin-left: 100px;
}
.lin{
  line-height: 24px;
}

@media screen and (max-width: 1200px) {
  .box{
    padding-top: 50px;
    padding-bottom: 0;
  }
  .box .news-title {
    font-size: 14px;
  }

  .box .text {
    padding: 0;
  }
  .nav{
    font-size: 13px;
    &:first-child{
      padding-left: 0;
    }
    &:last-child{
      padding-right: 0;
    }
  }
}
@media screen and (max-width: 768px) {
  .bg-img{
    width: 100%;
  }
  .tt{
    width: 100%;
    max-width: 800px;
  }
}
</style>